<template>
  <div class="hello">
    子组件data数据——{{data_son}}
    <br />
    父组件data数据——{{data_father}}——完成父传子操作
    <br />
    <button @click="changeFa">点击修改父组件的数据</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      data_son: '子组件'
    }
  },
  methods: {
    changeFa() {
      // 此处使用$emit传递一个方法 childFn 参数为{}中的成员
      this.$emit('child-fn', '向父组件传值')
    }
  },
  created() {},
  props: ['data_father']
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
